<template>
  <div style="padding: 10px;">
    <el-row>
      <el-col :span="22">
        <el-form inline :model="form_data" ref="searchForm">
          <el-form-item label="单据类型" prop="goods_type">
            <el-select filterable  v-model="form_data.goods_type" placeholder="请选择">
<!--              <el-option v-for="dict in dict.type.order_product_type" :key="dict.value" :label="dict.label"-->
<!--                         :value="dict.value"  ></el-option>-->
              <el-option v-for="item in all_product_list" :key="item.id" :label="item.name" :value="item.name"></el-option>
              <el-option label="整柜" value="3" ></el-option>
              <!--              <dict-tag :options="dict.type.order_product_type" :value="form_data.type" />-->
            </el-select>
          </el-form-item>
          <el-form-item label="装柜日期" prop="loadingTime">
            <el-date-picker
              v-model="loadingTime"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="number">
            <el-input placeholder="搜索柜号/合同号" v-model="form_data.number"></el-input>
          </el-form-item>
          <el-form-item prop="cargoOwnerId">
            <el-select filterable   filterable placeholder="全部货主" v-model="form_data.cargoOwnerId">
              <el-option v-for="item in owner_list" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="supplyListStatus">
            <el-select filterable  placeholder="全部状态" v-model="form_data.supplyListStatus">
              <el-option v-for="item in dict.type.supply_list_status" :key="item.value" :label="item.label"
                         :value="item.value"  ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="getData" size="mini" type="primary">搜索</el-button>
            <el-button @click="resetData" size="mini">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <div style="text-align: right;">
          <el-button type="primary" size="mini" @click="exportsData" >导出</el-button>
        </div>
      </el-col>
      <el-col>
        <el-table v-show="goods_type == 3" :data="table_data"  :height="table_height" >
          <el-table-column label="合同号" prop="contractNumber" width="120"></el-table-column>
          <el-table-column label="柜号" prop="containerNumber" width="120"></el-table-column>
          <el-table-column label="货款金额" prop="totalPrice" width="120"></el-table-column>
          <el-table-column label="预收款" prop="prereceiptAmt" width="120"></el-table-column>
          <el-table-column label="实际垫资金额" prop="advanceAmt" width="120"></el-table-column>
          <el-table-column label="垫资时间" prop="advanceDate" width="120"></el-table-column>
          <el-table-column label="付汇手续费" prop="cargoServiceFee" width="120"></el-table-column>
          <el-table-column label="付汇金额" prop="paymentPrice" width="120"></el-table-column>
          <el-table-column label="付汇手续费" prop="handlingFee" width="120"></el-table-column>
          <el-table-column label="单证费" prop="docFee" width="120"></el-table-column>
          <el-table-column label="海外运费" prop="overseasFreightCost" width="120"></el-table-column>
          <el-table-column label="国内运费" prop="domesticFreightCost" width="120"></el-table-column>
          <el-table-column label="清关费" prop="customsClearanceFee" width="120"></el-table-column>
          <el-table-column label="税金" prop="importTax" width="120"></el-table-column>
          <el-table-column label="交税时间" prop="importTaxPayTime" width="120"></el-table-column>
          <el-table-column label="还款时间" prop="receiptDate" width="120"></el-table-column>
          <el-table-column label="资金使用天数" prop="fundingDays" width="120"></el-table-column>
          <el-table-column label="税金使用天数" prop="taxDays" width="120"></el-table-column>
          <el-table-column label="实际垫款金额" prop="actualAdvanceAmt" width="120"></el-table-column>
          <el-table-column label="服务费" prop="serviceFee" width="120"></el-table-column>
          <el-table-column label="税差" prop="taxDifference" width="120"></el-table-column>
          <el-table-column label="应收金额" prop="receivableAmt" width="120"></el-table-column>
          <el-table-column label="收款金额总数" prop="receiptAmt" width="120"></el-table-column>
          <el-table-column label="收款金额列表" prop="receiptAmts" width="120"></el-table-column>
          <el-table-column label="应收尾款" prop="finalPayableAmt" width="120"></el-table-column>
          <el-table-column label="仓储费" prop="storageCharges" width="120"></el-table-column>
          <el-table-column label="监管仓费" prop="supervisionWarehouseFee" width="120"></el-table-column>
          <el-table-column label="备注" prop="remark" width="120"></el-table-column>
        </el-table>

        <el-table v-show="goods_type != 3" :data="table_data"  :height="table_height">
          <el-table-column align="center"  label="货主" prop="contractNumber" width="120"></el-table-column>
          <el-table-column align="center"  label="装运方式" prop="materialFlowType" width="120">
            <template slot-scope="scope" >
              <dict-tag :options="dict.type.material_flow_type" :value="scope.row.materialFlowType"/>
            </template>
          </el-table-column>
          <el-table-column align="center"  label="货品" prop="productNames" width="120"></el-table-column>
          <el-table-column align="center"  label="件数" prop="totalQty" width="120"></el-table-column>
          <el-table-column align="center"  label="柜号" prop="containerNumber" width="120"></el-table-column>
          <el-table-column align="center"  label="预付款" >
            <el-table-column align="center"  label="金额" prop="prepaymentAmt" width="120"></el-table-column>
            <el-table-column align="center"  label="日期" prop="prepaymentDate" width="120"></el-table-column>
          </el-table-column>
          <el-table-column align="center"  label="装柜时间" prop="loadingDate" width="120"></el-table-column>
          <el-table-column align="center"  label="到港" prop="destinationPort" width="120"></el-table-column>
          <el-table-column align="center"  label="清关行" prop="customsClearanceCompany" width="120"></el-table-column>
          <el-table-column align="center"  label="市场" prop="market" width="120"></el-table-column>
          <el-table-column align="center"  label="入场日期" prop="arrivalTime" width="120"></el-table-column>
          <el-table-column align="center"  label="状态" prop="status" width="120">
            <template slot-scope="scope" >
              <dict-tag :options="dict.type.supply_list_status" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column align="center"  label="清柜日期" prop="clearCabinetDate" width="120"></el-table-column>
          <el-table-column align="center"  label="已售数量" prop="saleCnt" width="120"></el-table-column>
          <el-table-column align="center"  label="库存数量" prop="surplusCnt" width="120"></el-table-column>
          <el-table-column align="center"  label="售卖金额" prop="salesAmount" width="120"></el-table-column>
          <el-table-column align="center"  label="国外-运费" prop="foreignFreightFee" width="120"></el-table-column>
          <el-table-column align="center"  label="代理" prop="agent" width="120"></el-table-column>
          <el-table-column align="center"  label="进口税金" >
            <el-table-column label="付税日期" prop="taxPaymentDate" width="120"></el-table-column>
            <el-table-column label="税金" prop="predictImportTax" width="120"></el-table-column>
          </el-table-column>
          <el-table-column align="center"  label="国内清关费">
            <el-table-column align="center"  label="实付税金" prop="actualImportTax" width="120"></el-table-column>
            <el-table-column align="center"  label="税金差额" prop="importTaxDiff" width="120"></el-table-column>
            <el-table-column align="center"  label="清关费" prop="predictCustomsClearanceFee" width="120"></el-table-column>
            <el-table-column align="center"  label="实付清关费" prop="actualCustomsClearanceFee" width="120"></el-table-column>
            <el-table-column align="center"  label="清关费差额" prop="customsClearanceFeeDiff" width="120"></el-table-column>
            <el-table-column align="center"  label="国内运费" prop="domesticFreightFeeQuotation" width="120"></el-table-column>
            <el-table-column align="center"  label="实付陆运费" prop="domesticFreightFeeCost" width="120"></el-table-column>
            <el-table-column align="center"  label="陆运费差额" prop="domesticFreightFeeDiff" width="120"></el-table-column>
          </el-table-column>
          <el-table-column align="center"  label="档口代垫运费" prop="stallAdvanceFee" width="120"></el-table-column>
          <el-table-column align="center"  label="市场费用" prop="marketFee" width="120"></el-table-column>
          <el-table-column align="center"  label="费用合计" prop="totalFee" width="120"></el-table-column>
          <el-table-column align="center"  label="服务费" prop="serviceFee" width="120"></el-table-column>
          <el-table-column align="center"  label="货主尾款" prop="finalPayment" width="120"></el-table-column>
        </el-table>
        <pagination
          v-show="list_total>0"
          :total="list_total"
          :page.sync="list_params.pageNum"
          :limit.sync="list_params.pageSize"
          @pagination="getData"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { settlementFruitExport, settlementFruit, settlementFruitDragon } from '@/api/report/report'
import {list as ownerList} from "@/api/base/owner";
import { AllList } from '@/api/product/info'
export default {
  name: "settlement_fruit",
  dicts:['order_product_type','supply_list_status','material_flow_type'],
  data(){
    return {
      table_height:window.innerHeight - 300,
      list_params: {
        pageNum: 1,
        pageSize: 10,
        customer:'',
        subjectName:'',
      },
      goods_type:3,
      list_total:0,
      loadingTime:'',
      table_data:[],
      form_data:{
        cargoOwnerId:'',
        goods_type:'',
        number:'',
        supplyListStatus:''
      },
      owner_list:[],
      all_product_list:[]
    }
  },
  created(){
    this.getOwnerList()
    this.getAllProductList()
  },
  methods:{
    getOwnerList(){
      ownerList({is_page:0}).then(res=>{
        this.owner_list = res.rows
      })
    },
    resetData(){
      this.loadingTime = []
      this.$refs.searchForm.resetFields()
      this.getData()
    },
    getAllProductList(){
      AllList().then(res => {
        this.all_product_list = res.rows;
      })
    },
    getData() {
      if (this.form_data.goods_type == '') {
        this.$message.error('请选择单据类型')
        return
      }
      let type = '';
      if (this.form_data.goods_type != 3){
        type = undefined;
      }else{
        type = 3;
      }
      this.goods_type = this.form_data.goods_type
      this.form_data = {
        ...this.form_data,
        type:type,
        goodsName:this.form_data.goods_type,
        pageNum:this.list_params.pageNum,
        pageSize:this.list_params.pageSize
      }
      console.log(this.loadingTime)
      if (this.loadingTime) {
        this.form_data = {
          ...this.form_data,
          loadingTimeStart:this.loadingTime[0],
          loadingTimeEnd:this.loadingTime[1]
        }
      }
      if(this.form_data.goods_type != 3){
        settlementFruitDragon(this.form_data).then(res=>{
          this.table_data = res.rows
          this.list_total = res.total
        })
      }else{
        settlementFruit(this.form_data).then(res=>{
          this.table_data = res.rows
          this.list_total = res.total
        })
      }

    },
    exportsData(){
      settlementFruitExport(this.form_data).then(res=>{
        const url= window.URL.createObjectURL(new Blob([res]));
        const link= document.createElement('a');
        link.href = url;
        link.download =`结算清单(按果品)_${new Date().getTime()}.xlsx`;
        link.click();
      })
    }
  }
}
</script>

<style scoped>

</style>
